<template>
  <div class="app-container">
    <!-- 查询结果 -->
    <!-- 账本详情 -->
    <el-card>
      <div slot="header" class="clearfix">
        <div class="header">{{$t('账本详情')}}</div>
        <!-- <el-select v-model="listQuery.fromId" clearable :placeholder="$t('请选择收支来源')">
          <el-option v-for="item in accountFrom" :value="item.value" :label="item.label"></el-option>
        </el-select> -->
        <el-select v-model="listQuery.payType" clearable :placeholder="$t('请选择支付方式')">
          <el-option v-for="item in accountPayType" :value="item.value" :label="item.label"></el-option>
        </el-select>
        <!-- <el-select v-model="listQuery.typeId" clearable :placeholder="$t('请选择入账类型')">
          <el-option v-for="item in accountType" :value="item.value" :label="item.label"></el-option>
        </el-select> -->
        <el-date-picker v-model="listQuery.dateTime" value-format="yyyy-MM-dd hh:mm:ss" type="daterange"
          align="right" unlink-panels range-separator="——" :start-placeholder='$t("开始日期")' :end-placeholder='$t("结束日期")'
          :picker-options="pickerOptions">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="handleFilter">{{$t('Search')}}</el-button>
      </div>

      <div class="table-layout">
        <el-row>
          <el-col :span="12" class="table-cell-title">{{$t('总金额(订单金额+账本收入)')}}</el-col>
          <el-col :span="12" class="table-cell-title">{{$t('总税费')}}</el-col>
<!--          <el-col :span="8" class="table-cell-title">{{$t('额外总收入')}}</el-col>-->
        </el-row>
        <el-row>
          <el-col :span="12" class="table-cell">
              <el-link target="_blank">${{shopDetailsSummary.totalPrice + shopDetailsSummary.totalExtraIncome}}</el-link>
              <el-link type="primary" target="_blank">
                  {{$t('订单金额')}}${{shopDetailsSummary.totalPrice}}
              </el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link type="warning" target="_blank">
                  {{$t('账本收入')}}${{shopDetailsSummary.totalExtraIncome}}
              </el-link>
          </el-col>
          <el-col :span="12" class="table-cell">
              <el-link type="primary">GST ${{shopDetailsSummary.taxGST}}</el-link><el-divider direction="vertical"></el-divider>
              <el-link type="success">HST ${{shopDetailsSummary.taxHST}}</el-link><el-divider direction="vertical"></el-divider>
              <el-link type="warning">PST ${{shopDetailsSummary.taxPST}}</el-link>
          </el-col>
        </el-row>
      </div>
      <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit
        highlight-current-row>
        <el-table-column align="center" :label="$t('序号')" type="index" :index="getIndex" width="50"></el-table-column>
        <el-table-column align="center" :label="$t('会员名称')" prop="nikeName"></el-table-column>
        <el-table-column align="center" :label="$t('账号')" prop="userName"></el-table-column>

        <el-table-column align="center" :label="$t('入账时间')" prop="addTime">

        </el-table-column>
        <el-table-column align="center" :label="$t('入账类型')">
          <template slot-scope="scope">
            收入
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('金额')" prop="amount">
          <template slot-scope="scope">
            {{ scope.row.price | floorTwoDecimal }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('税费')" prop="amount">
          <template slot-scope="scope">
            <div> GST ${{scope.row.taxGST}}</div>
            <div> HST ${{scope.row.taxHST}}</div>
            <div> PST ${{scope.row.taxPST}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('支付方式')" prop="amount">
          <template slot-scope="scope">
            {{ payType[scope.row.payType] }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('备注')" prop="remark" />
      </el-table>
      <pagination :auto-scroll="false" v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
        @pagination="getList" />
    </el-card>
    <!-- 额外详情 -->
    <el-card style="margin-top:20px">
      <div slot="header" class="clearfix">
        <div class="header">{{$t('额外收入|支出')}}</div>
        <el-date-picker v-model="bookQuery.dateTime" value-format="yyyy-MM-dd hh:mm:ss" type="daterange"
          align="right" unlink-panels range-separator="——" :start-placeholder='$t("开始日期")' :end-placeholder='$t("结束日期")'
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="extraHandleFilter">{{$t('Search')}}</el-button>
        <el-button type="primary" @click="handerCreate">{{$t('添加额外收入')}}</el-button>
      </div>

      <div class="table-layout">
        <el-row>
          <el-col :span="12" class="table-cell-title">{{$t('额外总收入')}}</el-col>
          <el-col :span="12" class="table-cell-title">{{$t('额外总支出')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="table-cell">${{extraDetailsSummary.totalIncome}}</el-col>
          <el-col :span="12" class="table-cell">${{extraDetailsSummary.totalExpenses}}</el-col>
        </el-row>
      </div>
      <el-table v-loading="listLoading" :data="extraDetailsList" :element-loading-text="$t('Searching')" border fit
        highlight-current-row>
        <el-table-column align="center" :label="$t('序号')" type="index" :index="getIndex" width="50"></el-table-column>
        <el-table-column align="center" :label="$t('入账时间')" prop="recordDate" />
<!--        <el-table-column align="center" :label="$t('入账类型')">
          <template slot-scope="scope">收入</template>
        </el-table-column>-->
        <el-table-column align="center" :label="$t('金额')" prop="amount">
          <template slot-scope="scope">
            {{ scope.row.amount | floorTwoDecimal }}
          </template>
        </el-table-column>accountFrom
        <el-table-column align="center" :label="$t('记录类型')" prop="amount">
          <template slot-scope="scope">
            {{ accountType[scope.row.recordType].label }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('收支来源')" prop="amount">
          <template slot-scope="scope">
            {{ accountFrom[scope.row.sourceType].label }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('备注')" prop="remark" />
      </el-table>
      <pagination :auto-scroll="false" v-show="extraDetailsTotal > 0" :total="extraDetailsTotal" :page.sync="bookQuery.page" :limit.sync="bookQuery.limit"
        @pagination="getExtraList" />
    </el-card>
    <!-- 门店进货支出 -->
    <el-card style="margin-top:20px">
      <div slot="header" class="clearfix">
        <div class="header">{{$t('门店进货支出')}}</div>
        <div slot="header" class="clearfix">
          <el-date-picker v-model="expendQuery.dateTime" value-format="yyyy-MM-dd hh:mm:ss" type="daterange"
            align="right" unlink-panels range-separator="——" :start-placeholder='$t("开始日期")'
            :end-placeholder='$t("结束日期")' :picker-options="pickerOptions">
          </el-date-picker>
          <el-button type="primary" icon="el-icon-search" @click="expendHandleFilter">{{$t('Search')}}</el-button>
        </div>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="8" class="table-cell-title">{{$t('订单总量')}}</el-col>
          <el-col :span="8" class="table-cell-title">{{$t('原料数量')}}</el-col>
          <el-col :span="8" class="table-cell-title">{{$t('订单总金额')}}</el-col>
          <!-- <el-col :span="8" class="table-cell-title">{{$t('总税费')}}</el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">${{expendDetailsSummary.totalOrderNum}}</el-col>
          <el-col :span="8" class="table-cell">${{expendDetailsSummary.totalGoodsNum}}</el-col>
          <el-col :span="8" class="table-cell">${{expendDetailsSummary.totalPrice}}</el-col>
          <!-- <el-col :span="8" class="table-cell">${{1}}</el-col> -->
        </el-row>
      </div>
      <el-table v-loading="listLoading" :data="expendlist" :element-loading-text="$t('Searching')" border
        fit highlight-current-row>
        <el-table-column align="center" :label="$t('序号')" type="index" :index="getIndex" width="50"></el-table-column>
        <el-table-column align="center" :label="$t('单据生成时间')" prop="addTime">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px"> {{ scope.row.addTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('订单编号')" prop="orderSn" />
        <el-table-column align="center" :label="$t('员工名称')" prop="username" />
        <el-table-column align="center" :label="$t('收货人名称')" prop="consignee" />
        <el-table-column align="center" :label="$t('入账类型')">
          <template slot-scope="scope">{{ $t('支出') }}</template>
        </el-table-column>
        <el-table-column align="center" :label="$t('订单金额')" prop="shopSpendingAmount">
          <template slot-scope="scope">
            <el-tag type="warning" effect="dark">${{ scope.row.actualPrice | floorTwoDecimal }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" :label="$t('商品数量')" prop="merchandiseSn" /> -->
<!--        <el-table-column align="center" :label="$t('订单完成时间')" prop="endTime" />-->
        <el-table-column align="center" :label="$t('订单备注')" prop="orderRemark" />
        <el-table-column align="center" :label="$t('Operate')" width="120" class-name="small-padding fixed-width">
          <template slot="header" slot-scope="{row}"><i class="el-icon-setting"></i>{{ $t('Operate') }}</template>
          <template slot-scope="scope">
            <el-popover placement="right" trigger="click">
              <el-table v-loading="cashScheduleLoading" :data="expendlistDetails" border max-height="500" stripe>
                <el-table-column align="center" fixed type="index" :label="$t('排序')" width="50"></el-table-column>
                <el-table-column align="center" property="merchandiseSn" :label="$t('原料编号')"></el-table-column>
                <el-table-column align="center" property="merchandiseName" :label="$t('原料名称')"></el-table-column>
                <el-table-column align="center" property="price" :label="$t('金额')"></el-table-column>
                <el-table-column align="center" property="number" :label="$t('原料购买量')"></el-table-column>
              </el-table>
              <!-- <pagination v-show="cashScheduleTotal>20" :total="cashScheduleTotal" :page.sync="cashScheduleQuery.page" :limit.sync="cashScheduleQuery.limit"
                          @pagination="handleDetail(scope.row)"/> -->
              <el-button slot="reference" icon="el-icon-view" v-permission="['GET /admin/p/store_handover_detail']"
                type="primary" size="mini" @click="handleDetail(scope.row)">{{ $t('Details') }}
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <pagination :auto-scroll="false" v-show="expendTotal > 0" :total="expendTotal"
        :page.sync="expendQuery.page" :limit.sync="expendQuery.limit"
        @pagination="getShopExpendList" />
    </el-card>
    <!-- 第一个弹框-添加配方 -->
    <div class="dialogCenter">
      <el-dialog :title="$t('添加')" :visible.sync="dialogVisible1" width="40%" :before-close="handleClose"
        :close-on-click-modal="false">
        <!-- 表单内容 -->
        <div>
          <el-form :model="formulaForm" :rules="rules" ref="formulaForm" label-width="120px" class="demo-ruleForm">
            <el-form-item :label="$t('入账时间')" prop="recordDate">
              <el-date-picker
              v-model="formulaForm.recordDate"
              class="filter-item"
              :editable="false"
              type="datetime"
              clearable="true"
             :placeholder="$t('请输入账时间')"
              align="right"
              value-format="yyyy-MM-dd hh:mm:ss"
            >
            </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('类型')" prop="recordType">
              <el-select v-model="formulaForm.recordType" clearable class="filter-item" :placeholder="$t('请选择类型')">
                <el-option v-for="item in accountType" :key="item.id" :value="item.value"
                  :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('金额')" prop="amount">
              <el-input v-model="formulaForm.amount" :placeholder="$t('请输入金额')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('收支来源')" prop="sourceType">
              <el-select v-model="formulaForm.sourceType" clearable class="filter-item" :placeholder="$t('请选择收支来源')">
                <el-option v-for="item in accountFrom" :key="item.id" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('配方备注')" prop="remark">
              <el-input v-model="formulaForm.remark" :placeholder="$t('请输入备注')" type="textarea"
                :autosize="{ minRows: 3 }"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-check" type="primary" @click="submitForm('formulaForm')">{{ $t("确认")}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!-- 展示导入门店原料账本列表 -->
    <el-card style="margin-top:20px">
      <div slot="header" class="clearfix">
        <div class="header">{{$t('excel导入进货账本')}}</div>
        <el-select filterable clearable v-model="importMerchandiseQuery.id" placeholder="选择原料">
          <el-option
              v-for="item in importMaterialListAll"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            <span style="float: left">{{ item.name }}</span>
          </el-option>
        </el-select>
<!--        <el-input :style="{width:'220px'}" placeholder="请输入原料名称" v-model="importMerchandiseQuery.name" clearable></el-input>-->
        <el-button type="primary" icon="el-icon-search" @click="getImportShopMerchandise">{{$t('Search')}}</el-button>
      </div>

      <div class="table-layout">
        <el-row>
          <el-col :span="12" class="table-cell-title">{{$t('总金额')}}</el-col>
          <el-col :span="12" class="table-cell-title">{{$t('原料总数量')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="table-cell">${{importMerchandiseSummary.totalPurchasePrice}}</el-col>
          <el-col :span="12" class="table-cell">{{importMerchandiseSummary.totalCount}}</el-col>
        </el-row>
      </div>
      <el-table v-loading="importMerchandiseListLoading" :data="importMerchandiseList" :element-loading-text="$t('Searching')" border fit
                highlight-current-row>
        <el-table-column align="center" :label="$t('序号')" type="index" :index="getIndex" width="50"></el-table-column>
        <el-table-column align="center" :label="$t('原料名称')" prop="amount">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>accountFrom
        <el-table-column align="center" :label="$t('原料价格')" prop="amount">
          <template slot-scope="scope">
            ${{ scope.row.purchasePrice | floorTwoDecimal }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('原料数量')" prop="amount">
          <template slot-scope="scope">
            {{ scope.row.number }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('原料总价')" prop="amount">
          <template slot-scope="scope">
            ${{ scope.row.number * scope.row.purchasePrice }}
          </template>
        </el-table-column>
      </el-table>
      <pagination :auto-scroll="false" v-show="importMerchandiseQuery.total > 0" :total="importMerchandiseQuery.total" :page.sync="importMerchandiseQuery.page" :limit.sync="importMerchandiseQuery.limit"
                  @pagination="getExtraList" />
    </el-card>
  </div>
</template>

<script>
  import {shopListDetailsSummary, shopListDetails, shopListBookDetails,importShopMerchandise,importShopMerchandiseSummary,importShopMerchandiseListAll,
    getShopExpendList,getShopExpendListDetails,addShopExtra,shopListOrderSummary,shopListExpendSummary,shopListExpend} from '@/api/accountbook'
  import BackToTop from '@/components/BackToTop'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
    name: "bookAccountDetail",
    components: {
      BackToTop, Pagination
    },
    data() {
      const payType = {
        1: this.$t('现金支付'),
        2: this.$t('礼物卡支付'),
        3: this.$t('Paypal支付'),
        4: this.$t('余额支付'),
        5: this.$t('Clover支付'),
        6: this.$t('积分兑换'),
      }
      return {
        //所有原料
        importMaterialListAll:[],
        //展示导入门店原料账本列表 参数
        importMerchandiseListLoading:false,
        importMerchandiseList:[],
        importMerchandiseQuery:{
          page: 1,
          limit: 10,
          total:0,
          shopId: undefined,
          classification: undefined,
          name: undefined,
        },
        //展示导入门店原料账本列表 汇总
        importMerchandiseSummary:{
          totalPurchasePrice:0,
          totalCount:0,
        },

        // 0订单、1采购、2退款、3充值
        accountFrom: [
          { value: 0, label: "订单" },
          { value: 1, label: "采购" },
          { value: 2, label: "退款" },
          { value: 3, label: "充值" },
          { value: 4, label: "其他" },
        ],
        accountType: [
          { value: 0, label: "收入" },
          { value: 1, label: "支出" },
          { value: 2, label: "额外收入" },
          { value: 3, label: "额外支出" },
        ],
        accountPayType: [
          { value: 1, label: "现金支付" },
          { value: 2, label: "礼物卡支付" },
          { value: 3, label: "Paypal支付" },
          { value: 4, label: "余额支付" },
          { value: 5, label: "Clover支付" },
          { value: 6, label: "积分兑换" },
        ],
        dialogVisible1: false,
        payType,
        listLoading: true,
        total: 0,
        extraDetailsTotal:0,
        expendTotal:0,
        listQuery: {
          page: 1,
          limit: 10,
          shopId: undefined,
          payType: undefined,
          dateTime: undefined,
          sort: 'add_time',
          order: 'desc'
        },
        bookQuery:{ // 额外收入请求参数
          page: 1,
          limit: 10,
          shopId: undefined,
          payType: undefined,
          dateTime: undefined,
          sort: 'add_time',
          order: 'desc'
        },
        expendQuery:{ // 额外收入请求参数
          page: 1,
          limit: 10,
          shopId: undefined,
          payType: undefined,
          dateTime: undefined,
          sort: 'add_time',
          order: 'desc'
        },
        shopDetailsSummary: {}, // 概览
        list: [],
        shopListDetails: [],
        extraDetailsList: [],// 额外收入列表
        extraDetailsSummary: {}, // 额外收入概览
        expendlist: [],// 支出列表
        expendlistDetails: [],// 支出列表详情
        expendDetailsSummary: {}, // 门店支出概览

        pickerOptions: {
          shortcuts: [{
            text: this.$t('Yesterday'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_7_days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_month'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        formulaForm: {
          recordType: undefined,
          amount: undefined,
          sourceType: undefined,
          remark: undefined,
          recordDate:undefined,
          shopId: undefined,

        },
        rules: {
          recordDate: [
            {
              required: true,
              message: "请选择时间",
              trigger: "change",
            },
          ],
          recordType: [
            {
              required: true,
              message: "请选择类型",
              trigger: "change", // 选择器使用 'change' 事件触发验证
            },
            {
              validator: (rule, value, callback) => {
                if (value === "" || value === null || value === undefined) {
                  callback(new Error("请选择类型"));
                } else {
                  callback();
                }
              },
              trigger: "change",
            },
          ],
          amount: [
            {
              required: true,
              message: "请输入金额",
              trigger: "blur",
            },
          ],
          sourceType: [
            {
              required: true,
              message: "请选择收支来源",
              trigger: "change", // 选择器使用 'change' 事件触发验证
            },
            {
              validator: (rule, value, callback) => {
                if (value === "" || value === null || value === undefined) {
                  callback(new Error("请选择收支来源"));
                } else {
                  callback();
                }
              },
              trigger: "change",
            },
          ],
        },
      }
    },
    created() {
      this.listQuery.shopId = this.$route.query.shopId
      this.bookQuery.shopId = this.$route.query.shopId
      this.expendQuery.shopId = this.$route.query.shopId
      this.importMerchandiseQuery.shopId = this.$route.query.shopId
      this.getList()
      this.getExtraList()
      this.getShopExpendList()
      this.getImportShopMerchandise()
      this.loadFormulaMaterialDrawer()
    },
    methods: {
      //打开配方原料
      loadFormulaMaterialDrawer() {
        importShopMerchandiseListAll()
            .then((response) => {
              this.importMaterialListAll = response.data.data;
            })
            .catch(() => {
              this.importMaterialListAll = [];
            });
      },
      // 获取账本详情列表
      getList() {
        shopListDetailsSummary(this.listQuery)
          .then(response => {
            this.shopDetailsSummary = response.data.data
          })
          .catch(() => {
            this.shopSummary = []
          })
        shopListDetails(this.listQuery)
          .then(response => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
     // 获取额外收入列表
     getExtraList(){
      shopListExpendSummary(this.bookQuery)
          .then(response => {
            this.extraDetailsSummary = response.data.data
          })
          .catch(() => {
            this.extraDetailsSummary = {}
          })
        shopListExpend(this.bookQuery)
          .then(response => {
            this.extraDetailsList = response.data.data.list
            this.extraDetailsTotal = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.extraDetailsList = []
            this.extraDetailsTotal = 0
            this.listLoading = false
          })
     },
     // 获取门店支出列表
     getShopExpendList(){
      shopListOrderSummary(this.expendQuery)
          .then(response => {
            this.expendDetailsSummary = response.data.data
          })
          .catch(() => {
            this.expendDetailsSummary = {}
          })
      getShopExpendList(this.expendQuery)
          .then(response => {
            this.expendlist = response.data.data.list
            this.expendTotal = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.expendlist = []
            this.expendTotal = 0
            this.listLoading = false
          })
     },
     handleDetail(row){
      this.cashScheduleLoading = true
      getShopExpendListDetails({orderId:row.id})
          .then(res => {
            this.expendlistDetails = res.data.data
            this.cashScheduleLoading = false
          })
          .catch(() => {
            this.expendlistDetails = []
            this.cashScheduleLoading = false
          })
     },
     // 添加额外支出
     handerCreate() {
        this.dialogVisible1 = true;
        this.dialogStatus = "create";
        this.formulaForm = {
          recordType: undefined,
          amount: undefined,
          sourceType: undefined,
          remark: undefined,
          recordDate:undefined,
          shopId: this.$route.query.shopId,
        };
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addShopExtra(this.formulaForm)
              .then((res) => {
                if (res.data.data == 100) {
                  this.$notify({
                    title: "警告",
                    message: "这是一条警告的提示消息",
                    type: "warning",
                  });
                } else {
                  this.dialogVisible1 = false;
                  this.$notify({
                    title: "成功",
                    message: "添加成功",
                    type: "success",
                  });
                  this.$refs["formulaForm"].resetFields();
                  this.getExtraList();
                }
              })
              .catch((error) => {
                console.error("请求错误：", error);
                if (error.data.errno == 1002) {
                  this.$notify.error({
                    title: "错误",
                    message: error.data.errmsg,
                  });
                } else {
                  this.$notify.error({
                    title: "错误",
                    message: "创建失败",
                  });
                }
              });
          } else {
            return false;
          }
        });
      },
      // 查找账本详情查找
      handleFilter() {
        this.getList()
      },
      // 查找
      extraHandleFilter(){
        this.getExtraList()
      },
      // 查找
      expendHandleFilter(){
        this.getShopExpendList()
      },
      handleClose(done) {
        done();
      },
      getIndex(index) {
        return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
      },


      //展示导入门店原料账本列表
      getImportShopMerchandise(){
        importShopMerchandise(this.importMerchandiseQuery)
            .then(res => {
              this.importMerchandiseList = res.data.data.list
              this.importMerchandiseQuery.total =  res.data.data.total
              this.importMerchandiseListLoading = false
            })
            .catch(() => {
              this.importMerchandiseList = []
              this.importMerchandiseQuery.total =  0
              this.importMerchandiseListLoading = false
            })

        importShopMerchandiseSummary(this.importMerchandiseQuery)
          .then(res => {
            this.importMerchandiseSummary = res.data.data
          })
          .catch(() => {

          })
      }
    }
  }
</script>

<style scoped>
  .header {
    margin-bottom: 10px;
  }

  .table-layout {
    margin-top: 20px;
    margin-bottom: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>
